import React,{useState} from 'react';
import './DataPerformance.scss'
import DataPerTeam from '../DataPerTeam/DataPerTeam';
import { Tabs, Button,Modal,Table,message,Form,Input} from 'antd';
import DataPerDoctor from '../DataPerDoctor/DataPerDoctor';
import {addTeamTarget} from '../../../../api/Datas'
import { useNavigate } from 'react-router-dom';
interface Props{

}
function DataPerformance(props:Props) {
  var navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);
  var [list,setList]=useState([])
  // 选项卡
  const items = [
    {
      key: '1',
      label: `团队目标设置`,
      children: <DataPerTeam />,
    },
    {
      key: '2',
      label: `医生目标设置`,
      children: <DataPerDoctor />,
    }
  ]
   // 变化的时候
   const onChange = (key: string) => {
    console.log(key);
  };
   // 显示弹窗
   const showModal = () => {
    setIsModalOpen(true);
  };
  // 弹窗确认
  const handleOk = () => {
    setIsModalOpen(false);
  };
  //弹窗取消
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 新增
  const onFinish = async(values: any) => {
    console.log('Success:', values);
     await addTeamTarget(values)
     handleCancel()
    // navigate(0)
    message.success({content:'新增成功'})
  };
    
  
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
    return (
        <div className='data-performance'>
            <div className="title">
        <div className='leftborder'></div>
        <h3>业绩目标管理</h3>
      </div>
      <div className="inputbox">
        <Tabs defaultActiveKey="1"
          items={items}
          onChange={onChange}
          tabBarExtraContent={{
            right: 
            <div className='btnbox'>
              <Button type="primary" onClick={showModal}>设置签约目标</Button>
              <Button>导出</Button>
              </div>
          }} />
      </div>
      <Modal footer={null} title="设置签约目标" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        >
          <Form.Item name='name' label='团队名称'>
            <Input placeholder='请输入团队名称'/>
          </Form.Item>
          <Form.Item name='target' label='全年目标'>
            <Input placeholder='请输入全年目标'/>
          </Form.Item>
          <Form.Item >
           
            <Button type="primary" htmlType="submit">提交</Button> &nbsp;&nbsp;
            <Button onClick={handleCancel}>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
        </div>
    );
}

export default DataPerformance;